import Vue from 'vue'
import Router from 'vue-router'

import ChildSlot from '../components/slot/ChildSlot'

Vue.use(Router)

export const routes = [
  {
    path: '/search',
    name: 'InputSearch',
    component: require('../components/InputSearch').default
  },
  {
    path: '/song/:id',
    name: 'SongDetail',
    component: require('../components/SongDetail').default,
    // props: true
    props: {test: 'Hello World'}
  },
  {
    path: '/icon',
    name: 'Icon',
    component: require('../components/SongIcon').default
  },
  {
    path: '/detail',
    name: 'Detail',
    component: require('../components/MusicHomeDetail').default
  },
  {
    path: '/loading',
    name: 'loading',
    component: require('../components/Loading').default
  },
  {
    path: '/no',
    name: 'no',
    component: require('../components/NoNetwork').default
  },
  {
    path: '/list',
    name: 'list  ',
    component: require('../components/MusicList').default
  },
  {
    path: '/test/:id',
    name: 'test  ',
    component: require('../components/prop/Search').default
  },
  {
    path: '/prop/base',
    name: 'MyInput',
    component: () => import(/* webpackChunkName: "group-1" */'../components/prop/MyInput')
    // component: require('../components/prop/MyInput').default
  },
  {
    path: '/test',
    name: 'test',
    component: () => import(/* webpackChunkName: "group-1" */'../components/test/test')
    // component: require('../components/test/test').default
  },
  {
    path: '/slot',
    name: 'slot  ',
    component: require('../components/slot/SlotParent').default,
    meta: {
      title: 'slot'
    }
  },
  {
    path: '/menu',
    name: 'menu  ',
    component: require('../components/navigation').default,
    meta: {
      requiresAuth: true,
      noLoading: true
    }
  },
  {
    path: '/base',
    name: 'base  ',
    component: require('../components/base/Base').default,
    meta: {
      title: 'base'
    }
  },
  {
    path: '/instruction',
    name: 'instruction  ',
    component: require('../components/instruction/Instrucation').default,
    meta: {
      title: 'base'
    }
  },
  {
    path: '/input',
    name: 'input  ',
    component: require('../components/input/InputDemo').default,
    meta: {
      title: 'input'
    }
  },
  {
    path: '/component',
    name: 'component  ',
    component: require('../components/component/ComponentDemo').default,
    meta: {
      title: 'component'
    }
  },
  {
    path: '/propv2',
    name: 'propv2  ',
    component: require('../components/propV2/parent').default,
    meta: {
      title: 'component'
    }
  },
  {
    path: '/myevent',
    name: 'myevent  ',
    component: require('../components/myevent/MyEvent').default,
    meta: {
      title: 'component'
    }
  },
  {
    path: '/componentV2',
    name: 'componentV2  ',
    component: require('../components/componentV2/componentV2').default,
    meta: {
      title: 'componentV2'
    }
  },
  {
    path: '/boundary',
    name: 'boundary  ',
    component: require('../components/boundary/Boundary').default,
    meta: {
      title: 'boundary'
    }
  },
  {
    path: '/error',
    name: 'error  ',
    component: require('../components/error').default,
    meta: {
      title: '出错啦'
    }
  },
  {
    path: '/action',
    name: 'action  ',
    component: require('../components/action/Action').default,
    meta: {
      title: 'action'
    },
    beforeEnter: (to, from, next) => {
      console.log('beforeEnter')
      next()
    }
  },
  {
    path: '/mixin',
    name: 'mixin  ',
    component: require('../components/mixin/Mixin').default,
    meta: {
      title: 'mixin'
    }
  },
  {
    path: '/bind',
    name: 'bind  ',
    component: require('../components/MyBind/MyBind').default,
    meta: {
      title: 'bind'
    }
  },
  {
    path: '/render',
    name: 'render  ',
    component: require('../components/Rendering/Rendering').default,
    meta: {
      title: 'render'
    }
  },
  {
    path: '/filters',
    name: 'filters  ',
    component: require('../components/filters/Filters').default,
    meta: {
      title: 'filters'
    }
  },
  {
    path: '/eventBus/:id',
    name: 'eventBus  ',
    component: require('../components/eventBus/eventBus').default,
    props: true,
    meta: {
      title: 'eventBus'
    }
  },
  {
    path: '/testUpdate',
    name: 'testUpdate  ',
    component: require('../components/MyTest/testUpdate').default,
    props: true,
    meta: {
      title: 'testUpdate'
    }
  },
  {
    path: '/AAA',
    name: 'AAA  ',
    component: require('../components/routeDemo/AAA').default,
    meta: {
      title: 'AAA'
    },
    children: [
      {
        path: 'BBB',
        name: 'BBB',
        component: require('../components/routeDemo/BBB').default,
        meta: {
          title: 'BBB'
        }
      },
      {
        path: 'CCC',
        name: 'CCC',
        component: require('../components/routeDemo/CCC').default,
        meta: {
          title: 'CCC'
        }
      }
    ]
  },
  {
    path: '/TestMain',
    name: 'TestMain  ',
    components: {
      main: require('../components/routeV2/TestMain').default,
      TestA: require('../components/routeV2/TestA').default,
      TestB: require('../components/routeV2/TestB').default,
      TestC: require('../components/routeV2/TestC').default
    },
    meta: {
      title: 'TestMain'
    },
  },
  {
    path: '/redirect',
    redirect: '/AAA'
  },

  // {
  //   path: '/eventBus/:id',
  //   name: 'eventBus  ',
  //   component: require('../components/eventBus/eventBus').default,
  //   meta: {
  //     title: 'eventBus'
  //   }
  // },
  // {
  //   path: '/user/:username/post/:post_id',
  //   name: 'eventBus  ',
  //   component: require('../components/eventBus/eventBus').default,
  //   meta: {
  //     title: 'eventBus'
  //   }
  // },
  // {
  //   path: '*',
  //   redirect: '/404',
  //   name: 'error',
  //   component: require('../components/error').default,
  //   meta: {
  //     title: 'error'
  //   }
  // },
  {
    path: 'qqq',
    component: ChildSlot,
    alias: '/QQQ',

  },
  {
    path: '/home',
    name: 'Home',
    component: require('../components/Home').default
  },
  {
    path:'/portal',
    name: 'portal',
    component: require('../components/PortalVue/PortalVue1').default
  },
  {
    path:'/portal2',
    name: 'portal2',
    component: require('../components/PortalVue/PortalVue2').default
  },
  {
    path:'/portal3',
    name: 'portal3',
    component: require('../components/PortalVue/PortalVue3').default
  },
  {
    path:'/sass',
    name: 'sass',
    component: require('../components/sass/SassTest').default
  },
  {
    path:'/jd',
    name: 'jd',
    component: require('../components/JDDDD/Home').default,
    meta: {
      title: 'jd'
    }
  },
  {
    path: '/button',
    name: 'button  ',
    component: require('../components/custom-button/test').default,
    props: true,
    meta: {
      title: 'testUpdate'
    }
  },
  {
    path: '/*',
    component: require('../components/login').default,
    meta: {
      public: true
    }
  }
]


export const router = new Router({
  routes: routes
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  // console.log(to)
  next()
  // this.$router.push(to.fullPath)
  // console.log('to'+to)
  // console.log('from'+from)
  // console.log('next'+next)
})
